<template>
    <div :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import * as theme from './theme'

    var elementResizeDetectorMaker = require("element-resize-detector")
    export default {
        name: "index",
        props: {
            option: Object,
            id: {
                type: String,
                default: "chart"
            },
        },
        data() {
            return {
                myChart: null,
                //定义主题map
                themeMap:{
                    vintage:theme.vintage,
                    dark:theme.dark,
                    westeros:theme.westeros,
                    essos:theme.essos,
                    wonderland:theme.wonderland,
                    walden:theme.walden,
                    chalk:theme.chalk,
                    infographic:theme.infographic,
                    macarons:theme.macarons,
                    roma:theme.roma,
                    shine:theme.shine,
                    purplePassion:theme.purplePassion,
                }
            }
        },
        watch: {
            option: {
                handler(newVal) {
                    // 重置图表
                    this.drawLine();
                },
                deep: true,
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.getElementById(this.id),this.themeMap[this.option.theme])
                // 绘制图表
                this.myChart.setOption(this.option);
                elementResizeDetectorMaker().listenTo(document.getElementById(this.id), element => {
                    // 重置图表
                    this.myChart.resize()
                })
            }
        }
    }
</script>

<style scoped>
</style>
